<?php $this->_extends('_layouts/share_layout')?>

<?php $this->_block('title'); ?>
Share the fun! Earn free spins by referring your friends.
<?php $this->_endblock(); ?>

<?php $this->_block('keywords');?>
<meta name="keywords" content="<?php echo $site['keywords']; ?>" />
<?php $this->_endblock();?>

<?php $this->_block('description');?>
<meta name="description" content="Share the fun! Earn free spins by referring your friends." />
<?php $this->_endblock();?>
<?php $this->_block('content'); ?>
	<script src="<?php echo $js_url; ?>jquery.fb.multifriend.select.js" type="text/javascript" ></script>
	<link href="<?php echo $css_url; ?>jquery.fb.multifriend.select-list.css" rel="stylesheet" type="text/css" /> 

	<div class="title">Earn 1 free spin for each friend you refer!</div>
	<div class="tr" style="margin-bottom: 35px;">
		<p id="message" class="sharetext">If you love CashDazzle it is time to spread the word. We love the game so much that for a limited time we will give you 1 free spin for each person you invite that registers and confirms. Follow these 3 easy steps:</p>
	</div>
		
	<table style="width: 750px;">
		<tr>
			<td style="width: 50%; vertical-align: top;">
				<table style="width: 100%;">
					<tr class="dt">
						<td colspan="2">Invite By Email</td>
					</tr>
					<tr>
						<td colspan="2">
							<select id="mail_server" class="step">
							<option value="AOL">AOL</option>
							<option value="Gmail">Gmail</option>
							<option value="Yahoo">Yahoo</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Email:</td>
						<td><input id="email" class="step" type="text"></td>
					</tr>
					<tr>
						<td style="width:36%">Your E-mail Password:</td>
						<td><input id="password" class="step" type="password" name="password"></td>
					</tr>
					<tr id="tips">
						<td colspan="2">
							<span id="importContacts" class="btn-2" name="importContacts">Import Your Contacts</span>
						</td>
					</tr>
					<tr>
						<td id="errorbox" style="color: red;" colspan="2"></td>
					</tr>
					<tr id="tell_block" style="display:none;">
						<td colspan="2">
							<form method="post" action="<?php echo url('user/tellfriends'); ?>" id="tellForm">
								<table>
									<tr>
										<td style="text-align: center;"><span class="btn-3" name="addUser" id="addUser" style="margin:0;">Add</span><br/></td>
										<td style="text-align: center;"><span class="btn-3" name="removeUser" id="removeUser" style="margin:0;">Remove</span></td>
									</tr>
									<tr>
										<td>
											<img id="loading_img" alt="loading" style="position: absolute; left: 70px; display: none; z-index:99;" src="<?php echo $img_url ?>loading.gif">
											<select class="step" id="full_lists" name="full_lists" style="float: left;width: 180px; height: 200px" multiple="multiple"></select>
										</td>
										<td>
											<select class="step" style="width: 180px; height: 200px;" multiple="multiple" id="selected_users" name="selected_users[]"></select>
										</td>
									</tr>
									<tr>
										<td style="text-align: center;" colspan="2">
											<span class="btn-1" name="tellFriends" id="tellFriends" style="margin-top:0;">Tell Friends</span>
										</td>
									</tr>
									<tr>
										<td id="errorbox2" style="color: red;" colspan="2"></td>
									</tr>
								</table>
							</form>	
						</td>
					</tr>
				</table>
			</td>
			
			<td style="width: 50%; vertical-align: top;">
				<table style="width: 100%;">
					<tr class="dt">
						<td colspan="2">Invite friends from facebook or twitter</td>
					</tr>
					<tr>
						<td colspan="2">
							<textarea rows="5" cols="38" id="fb_user_words"></textarea>
							<script>
								var t = null;
								var keydownstat = false;
								
								function counter(element)
								{
									var textCount = element.val().length;
									if(textCount > 100){
										keydownstat = false;
										element.val( element.val().substr(0, 99) );
									}
									$('#fb_user_words_remaining').html(100 - textCount);
									
									clearTimeout(t);
									if(keydownstat){
										t = setTimeout(function(){counter(element);}, 30);
									}
								}
							
								$('#fb_user_words').keydown(function(){
									keydownstat = true;
									counter($(this));
								});

								$('#fb_user_words').keyup(function(){
									var textCount = $(this).val().length;
									if(textCount > 100){
										keydownstat = false;
										$(this).val( $(this).val().substr(0, 99) );
									}
									$('#fb_user_words_remaining').html(100 - $(this).val().length);
									
									clearTimeout(t);
									keydownstat = false;
								});
							</script>
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<span id="fb_user_words_remaining">100</span> characters remaining
						</td>
					</tr>
					<tr>
						<td>
							<div id="shareToFacebook" style="display: none;"></div>
							<div id="fb-root"></div>
							<fb:login-button autologoutlink="true" perms="email,publish_stream"></fb:login-button>
							<?php if(isset($fbuid)): ?>
				      			<a href="#" id="directlygetfriends">Get Freinds</a>
				      			<script>
				      				$('#directlygetfriends').click(function(){
				      					getFriends('<?php echo $fb_js_token; ?>');
					      			});
				      			</script>
				      		<?php endif; ?>
				      		<script>
								FB.init({ 
						            appId: '<?php echo $fbsocials['appId']; ?>',
						            secret: '<?php echo $fbsocials['secret']; ?>', 
						            cookie:true, 
						            status:true, 
						            xfbml:true 
					         	});
								FB.Event.subscribe('auth.login', function(response) {
									parent.getFriends(response.session.access_token);
								});
				
								function getFriends(js_token){
									$('#formError').html('');
									$.ajax({
										 type: 'POST',
										 url: '<?php echo url('user/getfriends'); ?>',
										 data: {
											 js_token: js_token,
											 fb_user_words: $('#fb_user_words').val()
										 },
										 success: function(data){
													$('#shareToFacebook').attr("style", "position:absolute;left:40%;top:15%;background:#CCFFAA");
													$('#shareToFacebook').html(data);
													$('#shareToFacebook').show();
									 			  },
									 	 dataType: 'html'
									});
								}
					      	</script>
						</td>
						<td>
							<span id="tw-login"></span>
							<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
						    <script type="text/javascript">
							      $(function(){
							    	  twttr.anywhere(function (T) {
						    	        T("#tw-login").connectButton({authComplete: function(user) {
						    				
						    	            $("#tw-login").data('screenName' ,user.screenName);
						    	            $('#tw-button').show();
						    		
						    	          },});
						    	        if(T.isConnected()){
						    		    	 $('#tw-button').show();
						    		     }
							    	  });
							      });
						
							      twttr.events.bind('tweet', function(event) {
							    	  $.post("<?php echo url('user/followers');?>",{screenName : $("#tw-login").data('screenName')}, function(){});
							      });
						    </script>
						</td>
					</tr>
				</table>
			</td>
		</tr>

		<tr>
			<td style="width: 50%;">
				<table style="width:100%;">
					<tr class="dt">
						<td>
							Or invite email address
						</td>
					</tr>
					<tr>
						<td>
							<textarea rows="5" cols="38" id="friendemail"></textarea>
						</td>
					</tr>
					<tr>
						<td>
							<span id="inviteemail" class="btn-2" name="inviteemail">Send Invites</span>
						</td>
					</tr>
					<tr>
						<td id="inviteemailerror" style="color: red;"></td>
					</tr>
				</table>
			</td>
			<td style="width: 50%; vertical-align: top;">
				<table style=" width: 100%;">
					<tr class="dt">
						<td>Or use this link with friends
						</td>
					</tr>
					<tr>
						<td>
							<span id="clipboardWraning" style="color: #F00;"></span>
						</td>
					</tr>
					<tr>
						<td>
							<input type="text" id="referlink" size="50" value="http://<?php echo $site['domain']; ?>/?cam=ref&pub=wb&pla=<?php echo $user['id']; ?>" />
						</td>
					</tr>
					<tr>
						<td>
							<div id='embeddiv' style="z-index: 999; position:relative;">
								<span id="referlinkcopy" class="btn-2" style="position: absolute; left:0; top:0;">Copy Link</span>
								<embed style="position: absolute; left:0; top:0;" id="ZeroClipboardMovie_1" align="middle" height="29" width="184" wmode="transparent" flashvars="id=1&width=184&height=29" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowfullscreen="false" allowscriptaccess="always" name="ZeroClipboardMovie_1" quality="best" menu="false" loop="false" src="<?php echo $js_url; ?>ZeroClipboard.swf">
							</div>
							
							<script src="<?php echo $js_url; ?>ZeroClipboard.js"></script>
							<script>
								if(window.clipboardData){
									$('embed').hide();
									$('#referlinkcopy').click(function(){
										window.clipboardData.clearData();  
										window.clipboardData.setData("Text", $('#referlink').val()); 
										$('#clipboardWraning').html('copied');
									});
								} else if(navigator.userAgent.indexOf("Opera") != -1) {
									$('embed').hide();
									$('#referlinkcopy').click(function(){
										window.location = txt;  
									});
								}else{
									function clip_mouse_over(client) 
									{
										$('#referlinkcopy').removeClass('hover');
										clip.setText( $('#referlink').val() );
									}

									var clip = new ZeroClipboard.Client();
									clip.setHandCursor( true );
									clip.addEventListener('mouseOver', clip_mouse_over);
									clip.glue( 'referlinkcopy' );

									$('#embeddiv').click(function(){
										$('#clipboardWraning').html('copied');
										clearTimeout(t);
										t = setTimeout(function(){$('#clipboardWraning').html('');}, 1500);
									});
								}
							</script>
						</td>
					</tr>
				</table>
			</td>
		</tr>
	</table>

	<script type="text/javascript">
		$('#addUser').click(function(){
			$('#full_lists :selected').each(function(i,n){
				if($("#selected_users option").length >= 10){
					alert('You can select up to 10 people!');
					return false; 
				}
				$('#selected_users').append($(this).clone());;
				$(this).remove();
			});
		});
		
		$('#removeUser').click(function(){
			$('#selected_users :selected').each(function(){
				$('#full_lists').append($(this).clone());
				$(this).remove();
			});
		});
	
		$('#importContacts').click(function(){
			//TODO: get contact list
			var email = $('#email').val();
			if(/^([a-zA-Z0-9_-]|\.)+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)) {
				$('#tell_block').show();
				$('#loading_img').show();
				$.ajax({
					type: 'GET',
					url: '<?php echo url('user/getcontacts'); ?>',
					data: {contacts_option: $('#mail_server').val(),
						   email: $('#email').val(),
						   password: $('#password').val()
						  },
					success: function(data){
								$('#loading_img').hide();
								if(data['error']) {
									$('#errorbox').html(data['errorMessage']);
								}else if(data instanceof Array){
									$('#errorbox').html('');
									//data = eval('('+data+')');
									var contactlist = '';
									var optionlist = new Array();
									$.each(data, function(index, item){
										optionlist.push('<option selected="selected">'+item.email+'</option>');
										
									});
									optionlist.sort();
									for(var k in optionlist){
										contactlist += optionlist[k];
									}
									$('#full_lists').html(contactlist);
								}
							 },
					dataType: 'json'
				});
			}else {
				$('#errorbox').html('invalid email');
			}
		});
	
		$('#mail_server').change(function(){
			$('#email').val('');
			$('#password').val('');
		});
	
		$('#tellFriends').click(function(){
			if($('#selected_users').html() != ''){
				$.ajax({
					type: 'POST',
					url: "<?php echo url('user/tellfriends'); ?>",
					data: $("#tellForm").serialize(),
					success: function(data){
						if(data == 'islogout'){
							window.location.href = "<?php echo url('user/login'); ?>";
						}
						if(data == 'success'){
							$('#errorbox').html('success!');
							$('#errorbox2').html('');
						}
					}
				});
				//$('#tellForm').submit();
			}else{
				$('#errorbox2').html('Please select friends');
			}
		});

		$('#inviteemail').click(function(){
			var email = $('#friendemail').val();
				if(/^([a-zA-Z0-9_-]|\.)+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(email)) {
					$.ajax({
						type: 'POST',
						url: "<?php echo url('user/tellfriends'); ?>",
						data: {'selected_users': [email]},
						success: function(data){
							if(data == 'islogout'){
								window.location.href = "<?php echo url('user/login'); ?>";
							}
							if(data == 'success'){
								$('#inviteemailerror').html('success!');
							}
						}
					});
				}else{
					$('#inviteemailerror').html('Invalid email');
				}
		});
	</script>
<?php $this->_endblock(); ?>